<template>
  <!-- 使用条款 -->
  <div class="infoSection">
    <div class="toolbar"><router-link class="back" to="/h5/register"></router-link></div>
    <h2 class="infoHeader">{{info.title}}</h2>
    <div class="infoDetail" v-html="info.details"></div>
  </div>
</template>

<script>
import { api } from "@/api/api";
import "lib-flexible";
export default {
  components: {},
  data() {
    return {
      typeCode: "termsOfService",
      info: {}
    };
  },
  created() {
    this.getAnnouncementList();
  },
  methods: {
    async getAnnouncementList() {
      let params = {
        lang: "zh_CN",
        pageNum: 1,
        pageSize: 15,
        typeCode: this.typeCode
      };
      let res = await api.announcementList(params);
      let { code, data, msg } = res.data;

      if (code == 0) {
        this.info =
          data.records.map(item => ({
            id: item.id,
            title: item.title,
            details: item.content
          }))[0] || {};
      }
    }
  }
};
</script>

<style lang="less" scoped>
.infoSection {
  position: relative;
  background: #fff;
  padding: 1.1733rem 0.5333rem 1.6667rem;
  box-sizing: border-box;
  min-height: 100vh;
  .toolbar {
    position: fixed;
    height: 1.1733rem;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    .back {
      display: inline-block;
      width: 0.64rem;
      height: 0.64rem;
      padding: 0.2667rem 0;
      margin-left: 0.4rem;
      background: url(../../assets/images/back.png) no-repeat left center;
      background-size: 100%;
      cursor: pointer;
    }
  }
  .infoHeader {
    height: 0.9333rem;
    font-size: 0.7467rem;
    font-familyA: Roboto-Medium;
    font-weight: 500;
    color: rgba(45, 57, 92, 1);
    line-height: 0.9333rem;
    margin: 0 -0.1333rem;
  }
  .infoDetail {
    padding-top: 0.6667rem;
    word-break: break-all;
    /deep/p {
      font-size: 0.3733rem;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(45, 57, 92, 1);
      line-height: 0.6133rem;
    }
  }
}
</style>